import React, { useEffect } from 'react'
import { PageHeader,Card} from 'antd';
import { connect } from 'react-redux';
import { getViewDetail } from '../sysRedux/getAppList';

const { Meta } = Card;
const ViewDetails = (props) => {

    useEffect(() => {
        props.dispatch(getViewDetail(props.location.state));
    },[]);
    console.log(props.details);
    return (
        <>
            <PageHeader
                className="site-page-header"
                onBack={() => props.history.goBack()}
                subTitle="详情"
            />
            <div>
                {
                    props.details.map((item, index) => (
                        <Card
                            key={index}
                            hoverable
                            style={{ width: 240, display: 'inline-block', margin: '10px', border: '1px #4C64D6 solid', overflow: 'hidden' }}
                            cover={<img alt="example" src={item.img} />}
                        >
                            <Meta description={item.text} />
                        </Card>
                    ))
                }
            </div>
        </>
    )
}

const mapStateToProps = (state) => ({
   details:state.viewDetails
})
// export default ViewDetails;
export default connect(mapStateToProps)(ViewDetails);
